<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>商户列表</h3>

			<myTable :tabelHeader="tableHeader" :tableData="table" @tableCellClick="onMoudelMsg"></myTable>
			<!-- @tableCellClick="onMoudelMsg" -->
		</el-card>



		<!-- 创建商户dialog -->
		<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
			<el-form :rules="rules" :model="user" label-width="150px" ref="ruleForm">
				<el-form-item label="商户名" prop="username">
					<el-input v-model="user.username" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="user.password" />
				</el-form-item>
				<el-form-item label="店铺名" prop="shopname">
					<el-input v-model="user.shopname" />
				</el-form-item>
				<el-form-item label="店铺地址" prop="address">
					<el-input v-model="user.address" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createYes('ruleForm')">确 定</el-button>
				<el-button @click="createNo">取 消</el-button>
			</div>
		</el-dialog>

		<div class="op-container">
			<el-button type="primary" @click="usergoodslist">请求刷新</el-button>
			<el-button type="success" @click="dialogFormVisible = true">新建商户</el-button>
		</div>

		<el-dialog title="删除提示" :visible.sync="dialogVisible" width="30%">
			<span>确定要删除吗？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="quxiao">取 消</el-button>
				<!-- dialogVisible = false -->
				<el-button type="primary" @click="queding">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<style>
</style>

<script>
	import {
		usergoodslist,
		regist,
		stat,
		deleteIt
	} from '../../../api/index';
	import myTable from '../../table';
	export default {
		name: 'businessList',
		components: {
			myTable
		},
		data() {
			return {
				dialogVisible: false,
				// 新建商户
				user: {
					password: '',
					username: '',
					shopname: '',
					address: ''
				},
				// 新建商户非空规则
				rules: {
					username: [{
						required: true,
						message: '商户名不能为空',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: ['blur', 'change']
					}],
					shopname: [{
						required: true,
						message: '店铺名不能为空',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '地址不能为空',
						trigger: ['blur', 'change']
					}],
				},
				// 创建商户dialog  默认不显示
				dialogFormVisible: false,
				//表头数据
				tableHeader: [{
						type: 'text',
						value: '商户id',
						key: 'id'
					},
					{
						type: 'text',
						value: '商户名',
						key: 'username'
					},
					{
						type: 'text',
						value: '密码',
						key: 'password'
					},
					{
						type: 'text',
						value: '店铺名',
						key: 'shopname'
					},
					{
						type: 'text',
						value: '店铺地址',
						key: 'address'
					},
					{
						type: 'button',
						value: '店铺操作',
						// key: 'address'
						btnLis: [
							// 1停用状态   0  启用状态
							{
								name: "禁用商户",
								type: 'deleteId',
								judeKey: 'deleteId',
								judeValue: '0'
							},
							{
								name: "启用商户",
								type: 'deleteId',
								judeKey: 'deleteId',
								judeValue: '1'
							},
							{
								name: '删除商户',
								judeKey: 'primary',
								judeValue: 'primary',
								type: 'warning',
							}
						]
					}
				],
				//表格数据
				table: [],
				id: '',
			};
		},
		computed: {
			headers() {
				return {};
			}
		},
		created() {
			this.usergoodslist();
		},

		methods: {
			// 取消删除
			quxiao() {
				this.dialogVisible = false
				this.id = ''
			},
			// 确定删除
			queding() {
				var postObj = {
					id: this.id,
				}
				
				this.deleteIt(postObj)
			},
			//表格回调
			onMoudelMsg(item) {
				// console.log(item)
				var data = item.data
				console.log(data)
				if (item.type == 'deleteId') {
					console.log('点击是否启用')
					var postObj = {
						id: data.id,
						deleteId: data.deleteId == 0 ? 1 : 0
					}
					stat(postObj)
						.then(res => {
							console.log(postObj)
							console.log(res);
							this.usergoodslist()
						})
						.catch(err => {
							console.log(err);
						});
				}
				if (item.type == 'warning') {
					console.log('点击删除')
					this.id = data.id
					this.dialogVisible = true
				}
			},
			// 删除方法
			deleteIt(postObj) {
				deleteIt(postObj)
					.then(res => {
						console.log(postObj)
						console.log(res);
						this.usergoodslist()
						this.dialogVisible = false
					})
					.catch(err => {
						console.log(err);
					});
			},

			// 确定创建
			createYes(formName) {
				var data = this.user
				console.log(data)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// alert('submit!');
						regist(data).then(res => {
							console.log(res)
							this.reset()
							this.dialogFormVisible = false
							this.$notify.success({
								title: '成功',
								message: '创建成功'
							});
							this.usergoodslist()
						}).catch(err => {
							console.log(err)
							this.$notify.error({
								title: '失败',
								message: '创建失败'
							});
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
			// 取消创建
			createNo() {
				this.dialogFormVisible = false
				this.reset()
			},
			//表单重置
			reset() {
				this.user = {
					password: '',
					username: '',
					shopname: '',
					address: ''
				}
			},
			//   请求刷新
			usergoodslist: function() {
				this.table = []
				usergoodslist()
					.then(res => {
						console.log(res);
						this.table = res.data;
						res.data.forEach((item, index) => {
							item.primary = 'primary' //按钮默认显示
						})

					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	};
</script>
